<template>
  <div class="flex  font-bold gap-8 items-center pl-6 p-y-6" text="sm white">
    <div class="relative">
      <div :class="`${icon} w-8 h-8 z-1 relative text-slate-2`"></div>
      <div :class="`absolute top-0 left-0 w-full h-full ${bgColor} blur-xl`"></div>
    </div>
    <slot>
      <div class="text-3xl font-500 text-slate-2  ani-item ani-slideInLeft">{{ title }}</div>
    </slot>
  </div>
</template>
  
<script setup lang='ts'>
interface Props {
  icon?: string;
  bgColor?: string;
  title?: string;
}
withDefaults(defineProps<Props>(), {
  icon: 'i-ic:round-code',
  bgColor:  'bg-#33b3ae',
  title: '-'
})
</script>
  
<style>
  
</style>